<!DOCTYPE html>
<html lang="en">
<head>
    <title>统计数据</title>
    <script src="${rootPath}/static/gridly/jquery.gridly.js" type="text/javascript"></script>
    <script src="${rootPath}/static/echarts3/echarts.js" type="text/javascript"></script>

    <style >
        .brick{
            width: 48%;height: 320px; background: #fcfcfc;margin: 1% 25%;
        }
    </style>
</head>
<body>
<div style="width:48%; background: #fcfcfc;margin: 1% 25%;">
    <form role="form">
        <div class="form-group">
            <label class="col-md-3 control-label">按年龄查询：</label>
            <div class="col-md-6">
                <input class="form-control" type="text" placeholder="请输入年龄" id="age" name="age" value="18">
            </div>
        </div>
    </form>
    <button type="button" class="btn green" onclick="selectData()">查  询
    </button>
</div>
<div class="brick" >
    <div style="height: 100%;width: 100%;">
        <div class="con" id="view1" style="width: 100%;height:100%;">
        </div>
    </div>
</div>
<script>
    jQuery(document).ready(function () {
        selectData();
    })
    function selectData() {
        commonJs.ajaxRequest("${basePath}/dataController/ajax/countSumByAge",
                {age:$('#age').val()}, function (result) {
                    var data = result.data;
                    if(data.length ==0){
                        $('view1').html('');
                        return;
                    }
                    var max = data[0].count_sum;
                    var maxX = 0;
                    var min = data[0].count_sum;
                    var minX = 0;
                    var productInfoDate = new Array();
                    for(var i = 0;i<data.length;i++){
                        productInfoDate.push({value:data[i].count_sum});
                        if (max < data[i].count_sum){
                            max = data[i].count_sum;
                            maxX = i;
                        }
                        if (min > data[i].count_sum){
                            min =data[i].count_sum;
                            minX = i;
                        }
                    }
                    var option = {
                        title : {
                            text: '各类型书籍销量',
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['销量']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['文学','哲学','理工','经济','艺术','政治','其他']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'销量',
                                type:'bar',
                                data:productInfoDate,
                                markPoint : {
                                    data : [
                                        {name : '销量最高', value : max, xAxis: maxX, yAxis: max},
                                        {name : '销量最低', value : min, xAxis: minX, yAxis: min}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : 'average', name : '平均值'}
                                    ]
                                }
                            }
                        ]
                    };
                    var myChart = echarts.init(document.getElementById('view1'));
                    myChart.setOption(option);
                })
    }
</script>
</body>
</html>